<template>
  <div class="col-right">
    <!--登录信息-->
    <div id="login-info">
      <div class="clearfix">
        <div class="photo">
          <img src="~assets/img/photo-default.png" v-if="!user.userId"/>

          <img src="~assets/img/default-photo.png" v-if="user.userId && !user.imageUrl && user.sex == 0"/>

          <img src="~assets/img/userImgWomen.png" v-if="user.userId && !user.imageUrl && user.sex == 1" />

          <img :src="user.imageUrl | imgCdn" v-imgerror.photo v-if="user.imageUrl" :alt="user.realName"/>
        </div>

        <div class="user-wrap">

          <!--没有登录显示登录注册-->
          <p v-if="!user.userId">
            <a class="login" :href="`${address.CENTER_ADDRESS}?platformCode=${website.platformCode}`" @click.prevent="showLogin()" target="_blank">登录</a>
            <a :href="`${address.CENTER_ADDRESS}/register/register?platformCode=${website.platformCode}&refUrl=${fullpath}`"
               target="_blank"
               class="register">注册</a>
          </p>

          <p class="user.id">
            <a :href="`${address.CENTER_ADDRESS}?platformCode=${website.platformCode}`" target="_blank">{{ user.realName}}</a>
          </p>



          <!--已登录 && 普通用户 && 未开店-->
          <p v-if="!user.userId || userStatus.shopStatus === 0">
            欢迎来到聚贸跨境电商平台
            <!--欢迎来到<i class="text-primay">聚贸矿产!</i> -->
          </p>

          <!--已登录 && 普通用户 && 已开店-->
          <p v-if="user.userId && userStatus.vipUserLevel === 1 && userStatus.shopStatus === 1">您正在体验<i
            class="text-primay">聚诚通限时免费</i></p>

          <!--已登录 && vip && 会员剩余时间大于30天-->
          <p class="text-overflow"
             v-if="user.userId && userStatus.vipUserLevel !== 1 && userStatus.shopStatus === 1 && userStatus.remainDays > 30">
            欢迎您,<i
            class="text-primay">聚诚通<i>{{userVip[userStatus.vipUserLevel]}}</i></i></p>

          <!--已登录 && vip && 会员剩余时间小于等于30天-->
          <p class="remaindays"
             v-if="user.userId && userStatus.vipUserLevel !== 1 && userStatus.shopStatus === 1 && userStatus.remainDays <= 30">
            聚诚通{{ userVip[userStatus.vipUserLevel] }}会员将在
            <i class="text-primay">{{ userStatus.remainDays}}</i>天后过期，<a :href="`${platform.JCT_ADDRESS}`"
                                                                         target="_blank"
                                                                         class="text-primay">立即续费>></a>
          </p>
        </div>
      </div>
      <div class="actions">

        <!--快捷开店 两种情况出现 1. 未登录 2. 登录未开店-->
        <a :href="`${address.CENTER_ADDRESS}/shop/fastOpenShop?platformCode=${website.platformCode}`" v-if="!user.userId || userStatus.shopStatus === 0"
           class="el-button el-button--primary el-button--mini quick-shop" target="_blank">快捷开店</a>

        <!--专修店铺和发布商品在用户已登录并且已开店的情况下出现-->
        <a :href="`${address.CENTER_ADDRESS}/index?platformCode=${website.platformCode}&forwardUrl=/shop/enterpriseWebsite`"
           v-if="user.userId && userStatus.shopStatus === 1" target="_blank" class="decoration-shop">装修店铺</a>
        <a :href="`${address.CENTER_ADDRESS}/goods/selectCategoryMain?platformCode=${website.platformCode}`"
           v-if="user.userId && userStatus.shopStatus === 1"
           class="plush-shop" target="_blank">发布商品</a>
      </div>
    </div>

    <section class="service">
      <div class="service-item">
        <i class="icon icon-shop-auth"></i>
        <p class="title">商家认证</p>
      </div>

      <div class="service-item">
        <i class="icon icon-safe"></i>
        <p class="title">安全交易</p>
      </div>
    </section>

    <!--消息-->
    <div class="notice">
      <div class="tabs">
        <header class="header">
          <div class="tab-title" :class="{'active': noticeType === 1}" @click="changeNoticeType(1)">最新商机</div>
          <div class="tab-title" :class="{'active': noticeType === 2}" @click="changeNoticeType(2)">最新消息</div>

          <div class="bar" :style="`left: ${(noticeType-1)*110}px`"></div>
        </header>
        <div class="content">
          <!--最新商机-->
          <div class="business" v-show="noticeType === 1">

            <div class="no-login" v-if="!user.userId ||  userStatus.shopStatus === 0">
              <div class="img-box">
                <i class="icon icon-bulb"></i>
              </div>
              <!--未登录-->
              <div v-if="!user.userId">
                <p>您有 <span class="text-primay text-bold">1</span> 条新商机待联系</p>
                <p>请 <a :href="`${address.CENTER_ADDRESS}?platformCode=${website.platformCode}`" @click.prevent="showLogin()" target="_blank" class="text-primay">登录</a>后查看!
                </p>
              </div>

              <!--已登录 && 未开店-->
              <div v-if="user.userId && userStatus.shopStatus === 0">
                <p>您有 <span class="text-primay text-bold">1</span> 条新商机待联系</p>
                <a :href="`${address.CENTER_ADDRESS}/shop/fastOpenShop?platformCode=${website.platformCode}`" class="openShop" target="_blank">立即开店</a>
              </div>
            </div>

            <!--已登录 && 已开店 && 普通会员-->
            <div v-if="user.userId && userStatus.shopStatus === 1 && userStatus.vipUserLevel === 1">
              <ul class="new-lists">
                <li>
                  <a class="text-overflow item"
                     target="_blank"
                     :href="`${platform.JCT_ADDRESS}`"><span
                    class="news-type">【采购】</span>上海地区长期求购20*2000普板</a>
                </li>
              </ul>

              <section class="open-member-box">
                <header class="member-header text-center">
                  <h5 class="title-text">会员特权</h5>
                </header>

                <p class="member-advantage clearfix">
                  <span><i class="icon icon-target"></i>获取精准商机</span>
                  <span class="pull-right"><i class="icon icon-global"></i>全网流量推广</span>
                </p>

                <a class="open-member-link" :href="`${platform.JCT_ADDRESS}`" target="_blank">立即开通聚诚通服务</a>
              </section>
            </div>

            <!--商机列表  已登录 && 已开店 && 会员-->
            <div class="new-lists" v-if="user.userId && userStatus.shopStatus === 1 && userStatus.vipUserLevel > 1">
              <ul>
                <li v-for="item in niches" :key="item.nicheTitle">
                  <a class="text-overflow item"
                     :title="item.nicheTitle"
                     target="_blank"
                     :href="`${address.CENTER_ADDRESS}/index?forwardUrl=/businessPush/businessList&platformCode=${website.platformCode}`"><span
                    class="news-type">【{{ ['采购', '采购', '商讯', '商品'][item.nicheType] }}】</span>{{ item.nicheTitle}}</a>
                </li>
              </ul>
            </div>
          </div>

          <!--最新消息-->
          <div class="modify-price" v-show="noticeType === 2">
            <div class="new-lists">
              <ul>
                <li v-for="item in message" :key="item.articleContentId" :title="item.name">
                  <nuxt-link target="_blank" :to="{path:`/news/${item.articleContentId}`, query: {t: 1}}" class="item text-overflow">
                    <time class="news-type">{{ item.createTime | timeFlier('MM-DD')}}</time>
                    {{item.name}}
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from '~/plugins/axios'
  import address from '~/config/index'
  import platform from '~/config/platform'
  import website from '~/config/website'

  export default {

    props: {
      message: {
        type: Array,
        'default' () {
          return []
        }
      }
    },

    mounted () {
      this.fullpath = location.href
    },

    data () {
      return {
        website: website,
        // 显示通知类型
        noticeType: 1,
        fullpath: '',

        niches: [],

        adv: [{}],

        platform: platform,

        address: address,

        userVip: {
          2: '黄金会员',
          3: '铂金会员'
        }
      }
    },

    methods: {


      /**
       * 显示登录
       */
      showLogin (url) {
        // 显示登录框
        if (!url) {
          this.$store.commit('SET_OPEN', {opend: true, openurl: url})
        } else {
          this.$store.commit('SET_OPEN', {opend: true})
        }
      },
      /**
       * 登录之后获取商机
       * 无需做服务端渲染
       * @returns {Promise.<void>}
       */
      async getNiche () {
        const {data: niches = []} = await axios.get('/index/niche').then(data => data.data)
        this.niches = niches
      },

      /**
       * 切换显示商机和钢厂调价
       */
      changeNoticeType (type) {
        this.noticeType = type
      }
    },

    // 监视用户登录
    watch: {
      async user () {
        if (this.user.userId) {
          this.getNiche()
        }
      }
    },

    computed: {
      user () {
        return this.$store.state.user.user
      },

      userStatus () {
        return this.$store.state.user.userStatus
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .user-wrap {
    line-height: 26px;
    overflow: hidden;
  }

  .openShop{
    width: 76px;
    line-height: 24px;
    background-color: #e8af68;
    color: #fff;
    display: inline-block;
    border-radius:2px;
    margin-top: 12px;
    font-size: 12px;
  }
  .adv {
    height: 60px;
    margin: 5px 0;
    text-align: center;
    img {
      max-height: 60px;
      max-width: 100%;
    }
  }

  .quick-shop {
    width: 200px;
    background-color: #dd9d4c !important;
    border-color: #dd9d4c !important;
  }

  .service{
    display: table;
    table-layout: fixed;
    width: 100%;
    border-top: 1px solid #dedede;

    .service-item{
      width: 50%;
      height: 72px;
      text-align: center;
      display: table-cell;
      vertical-align: middle;

      .title{
        padding-top: 8px;
        font-size: 12px;
        color: #6e6e6e;
      }

      &:last-child{
        border-left: 1px solid #dedede;
      }
    }
  }

  %base {
    line-height: 26px;
    display: inline-block;
    text-align: center;
    font-size: 14px;
  }

  .login {
    @extend %base;
    color: $--color-primary;
  }

  .register {
    @extend %base;
    color: #3e3e3e;
    margin-left: 10px;
    &:hover {
      color: $--color-primary;
    }
  }

  .decoration-shop {
    text-align: center;
    display: inline-block;
    border: 1px solid $--color-primary;
    line-height: 23px;
    border-radius: 4px;
    width: 90px;
    border-color: $--color-primary;
    color: $--color-primary;
    margin-left: 0;
  }

  .plush-shop {
    text-align: center;
    display: inline-block;
    border: 1px solid #e8af68;
    background-color: #e8af68;
    color: #fff;
    border-radius: 4px;
    line-height: 23px;
    width: 90px;
    margin-left: 10px;

    &:hover{
      background-color: rgba(#e8af68,.8);
    }
  }

  // 开启会员
  .open-member-box {

    .member-header {
      position: relative;
      padding: 3px 0 5px;

      &:after,
      &:before {
        display: inline-block;
        content: " ";
        background: #dedede;
        height: 1px;
        left: 0;
        width: 48px;
        /*position: absolute;*/
        position: relative;
        vertical-align: super;

      }
    }

    .title-text {
      font-size: 18px;
      color: #6e6e6e;
      font-weight: normal;
      padding: 0 15px;
      display: inline-block;
      position: relative;
      z-index: 3;
    }
    .member-advantage {
      margin-bottom: 12px;
      color: #6e6e6e;

      .icon {
        vertical-align: text-bottom;
        margin-right: 5px;
      }
    }

    .open-member-link {
      line-height: 24px;
      color: #fff;
      background-color: $--color-primary;
      width: 100%;
      display: block;
      text-align: center;
      border-radius: 2px;
    }
  }

  // 商讯列表
  .new-lists {
    .item {
      display: block;
      font-size: 12px;
      line-height: 21px;
      color: #6e6e6e;

      &:hover {
        color: $--color-primary;
      }
    }
    .time, .news-type {
      padding-right: 6px;
    }
  }

  //登录
  #login-info {
    font-size: 12px;
    color: #6e6e6e;
    padding: 20px 10px 20px 20px;

    .photo {
      float: left;
      width: 56px;
      height: 56px;
      border-radius: 100%;
      margin-right: 10px;

      img {
        width: 56px;
        height: 56px;
        border-radius: 100%;
      }
    }

    .remaindays {
      line-height: 14px;
    }

    .user {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .actions {
      margin-top: 15px;
    }

    button {
      width: 90px;
    }

    .decoration-shop {
      width: 90px;
      color: $--color-primary;
      border-color: $--color-primary;
      &:hover {
        background-color: $--color-primary;
        color: #fff;
      }
    }
    .plush-shop {
      width: 90px;
    }
  }

  .notice {
    color: #6e6e6e;
  }

  .tabs {
    overflow: hidden;
    border-top: 1px solid #ddd;
    .header {
      height: 44px;
      line-height: 44px;
      position: relative;
      &:after {
        content: "";
        background-color: #dedede;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
      }
    }

    .content {
      height: 130px;
      overflow: hidden;
      font-size: 12px;
      color: #3e3e3e;
      padding: 12px 20px;
    }

    .bar {
      background-color: $--color-primary;
      position: absolute;
      bottom: 0;

      width: 120px;
      z-index: 5;
      height: 2px;
      transition: left .3s;
    }

    .tab-title {
      float: left;
      color: #3e3e3e;
      font-size: 14px;
      width: 50%;
      text-align: center;
      cursor: pointer;

      &.active {
        color: $--color-primary;
      }
    }

    .no-login {
      position: relative;
      text-align: center;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      line-height: 20px;

      .img-box {
        width: 42px;
        height: 42px;
        display: inline-block;
      }
    }

    .business {
      height: 100%;
    }
  }
</style>
